<script setup lang="ts">
import { ref } from "vue";
import Child from "./Child.vue";

const count = ref(0);
</script>

<template>
  <h1>App</h1>
  <!-- 
    vue3中给组件绑定v-model，做了两件事：
      1. 绑定属性 modelValue
      2. 绑定自定义事件 update:modelValue

    提供了其他用法：
      v-model:xxx="xxx" , 这种写法可以写多个, 取缔了 .sync
   -->
  <!-- <Child v-model="count"  /> -->
  <!-- <Child :modelValue="count" @update:modelValue="count = $event" /> -->

  <!-- 
    v-model:count="count"
      1. 绑定属性 count
      2. 绑定自定义事件 update:count
   -->
  <Child v-model:count="count" v-model:xxx="count" />
</template>

<style scoped></style>
